<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品收藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
    <style>
        html,
        body {
            background-color: #fff;
        }

        ul, ol {
            list-style: none;
        }

        body input[type='text'], ul, li {
            padding: 0;
            margin: 0;
        }

        .clear {
            clear: both;
            height: 0;
            font-size: 0;
            line-height: 0;
            visibility: hidden;
            overflow: hidden;
        }

        /*顶部*/
        .mui-content {
            background: #fff;
        }

        .mui-control-content .mui-loading {
            margin-top: 44px;
        }

        #sliderSegmentedControl {
        }

        .mui-scroll, .mui-scroll-wrapper {
            position: inherit;
        }

        .mui-slider-group {
            margin-top: 1rem;
        }

        .gd_nav {
            position: fixed;
            left: 0;
            top: 0.88rem;
            height: 1.306rem;
            z-index: 99;
            background: #fff;
            border-bottom: 1px solid #c5c5c5;
        }

        #slider .gd_nav a {
            font-size: 0.453rem;
            line-height: 1.306rem;
        }

        .gd_nav #sliderSegmentedControl .mui-active {
            color: #1c83fc;
        }

        /*列表*/
        .mui-col-xs-4 {
            width: 50%;
        }

        .gd_list {
            background: #fff;
        }

        .gd_list li {
            padding: 0.4rem 0.373rem;
            display: flex;
            justify-content: space-between;
        }

        .gd_list li .l {
            width: 3.2rem;
            height: 3.2rem;
        }

        .gd_list li .l img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 0.1rem;
        }

        .gd_list li .r {
            width: 5.666rem;
            height: 1.973rem;
        }

        .gd_list li .r p {
            margin: 0;
            color: #353535;
        }

        .gd_list li .r .t {
            font-size: 0.373rem;
            font-weight: bold;
            line-height: 0.626rem;
        }

        .gd_list li .r .scnr_t {
            line-height: 0.8rem;
        }

        .gd_list li .r .t2 {
            font-size: 0.346rem;
            color: #888888;
            line-height: 0.733rem;
            height: 1.3rem;
        }

        .price_all {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .price_all .price {
            color: #FF0000;
            font-size: 0.426rem;
        }

        .price_all button {
            width: 1.906rem;
            height: 0.6rem;
            line-height: 0.6rem;
            padding: 0;
            font-size: 0.32rem;
        }

        .gd_list li .r .scnr_t2 {
            line-height: 0.5rem;
            height: 1.9rem;
        }

        .gd_list li .r .price_all .sc {
            font-size: 0.346rem;
        }

        .my_topshan {
            background: url(../images/my_shan.png) no-repeat;
            background-size: 100% 100%;
        }

        #slider .gd_nav a .img_my_shan {
            height: 0.56rem;
            width: 0.56rem;
        }

        #slider .gd_nav .mui_my_shan {
            text-align: right;
        }
    </style>
</head>


<body>

<div id="app">
    <!--顶部-->
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">收藏</h1>
    </header>
    <div class="mui-content">
        <div id="slider" class="mui-slider">
            <div class="gd_nav">
                <!--<a class="mui-control-item mui_my_shan"><img class="img_my_shan" src="../images/my_shan.png"/></a>-->
                <div id="sliderSegmentedControl"
                     class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item mui-active" href="#item1mobile">商品收藏</a>
                    <a class="mui-control-item" href="#item2mobile">内容收藏</a>
                </div>

                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
            </div>
            <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <ul class="mui-table-view gd_list">
                                <li v-for="wareItem in wareGroup">
                                    <div class="l">
                                        <img :src="wareItem.pic"/>
                                    </div>
                                    <div class="r">
                                        <p class="t">{{wareItem.name}}</p>
                                        <p class="t2">{{wareItem.favournum}}人收藏</p>
                                        <div class="price_all">
                                            <span class="price">￥{{wareItem.min_price}}</span>
                                            <button @click="navWareDetail(wareItem.goodsid)">加入购物车</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll2" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <ul class="mui-table-view gd_list">
                                <li>
                                    <div class="l">
                                        <img src="../images/cbd.jpg"/>
                                    </div>
                                    <div class="r">
                                        <p class="t scnr_t">看感觉是快乐加工费将</p>
                                        <p class="t2 scnr_t2">看感觉是快乐加工费将黄金卡发货和机构规定的韩国队刚刚好接啊刚刚.</p>
                                        <div class="price_all">
                                            <span class="sc">11115人收藏</span>
                                            <span>2018-8-22</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="l">
                                        <img src="../images/cbd.jpg"/>
                                    </div>
                                    <div class="r">
                                        <p class="t scnr_t">看感觉是快乐加工费将</p>
                                        <p class="t2 scnr_t2">看感觉是快乐加工费将黄金卡发货和机构规定的韩国队刚刚好接啊刚刚.</p>
                                        <div class="price_all">
                                            <span class="sc">11115人收藏</span>
                                            <span>2018-8-22</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="l">
                                        <img src="../images/cbd.jpg"/>
                                    </div>
                                    <div class="r">
                                        <p class="t scnr_t">看感觉是快乐加工费将</p>
                                        <p class="t2 scnr_t2">看感觉是快乐加工费将黄金卡发货和机构规定的韩国队刚刚好接啊刚刚.</p>
                                        <div class="price_all">
                                            <span class="sc">11115人收藏</span>
                                            <span>2018-8-22</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="l">
                                        <img src="../images/cbd.jpg"/>
                                    </div>
                                    <div class="r">
                                        <p class="t scnr_t">看感觉是快乐加工费将</p>
                                        <p class="t2 scnr_t2">看感觉是快乐加工费将黄金卡发货和机构规定的韩国队刚刚好接啊刚刚.</p>
                                        <div class="price_all">
                                            <span class="sc">11115人收藏</span>
                                            <span>2018-8-22</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/tools/util.js"></script>
<script src="../js/host.config.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //mui初始化
    mui.init({
        swipeBack: false,
    });
    (function ($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: false //是否显示滚动条
        });
        var html2 = document.getElementById('item2mobile');
        document.getElementById('slider').addEventListener('slide', function (e) {
            if (e.detail.slideNumber === 1) {
                if (item2.querySelector('.mui-loading')) {
                    setTimeout(function () {
                        item2.querySelector('.mui-scroll').innerHTML = html2;
                    }, 500);
                }
            }
        });
    })(mui);
    let app = new Vue({
       el: '#app',
       data: {
           wareGroup: {},   // 商品
       },
        methods:{
            navWareDetail: function (goodsid) {
                mui.openWindow('goods_detail.html?goodsid=' + goodsid);
            }
        },
        mounted:function(){
            let _this = this;
            let userInfo = host_config.localStorage.user;
            let user = null;
            if(userInfo){
                user = JSON.parse(userInfo);
            }
            $.get(url + 'api/collect/collectlists', {uid:user.uid,type:0}, function (response) {
                let responseData = JSON.parse(response);
                if (responseData.code == '1') {
                    let wareGroup = responseData.data;
                    _this.wareGroup = wareGroup;
                }
            });
        }
    });
</script>
</body>

</html>